# Component: Shop Product

Comprehensive Product Detail Page (PDP) orchestrator

Ecommerce Block

### BEM Anatomy

| Type      | Class Name                    | Description                                                                                                                    |
| --------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-shop-product`            | The master product container. Uses a 50/50 split layout on medium viewports.                                                   |
| Element   | `__row`                       | The primary Bootstrap row wrapper ensuring consistent gutter spacing between the image and text sections.                      |
| Element   | `__col`                       | Major layout columns. Modifiers `--image` and `--text` handle visual and functional content.                                   |
| Modifier  | `__col--image`                | The left/top column dedicated to visual assets, including the main hero image and the thumbnail gallery.                       |
| Element   | `__image-wrapper`             | The primary display area for the active product image. Often manages aspect ratio (e.g., 1:1).                                 |
| Element   | `__image-link`                | The interactive anchor wrapping the main image, typically used to trigger a lightbox or high-resolution zoom view.             |
| Element   | `__image`                     | The actual `<img>` or `<picture>` element for the main product view. Uses `object-fit: cover` to fill the wrapper.             |
| Element   | `__thumbnails`                | A horizontal scrolling flex container for additional product images.                                                           |
| Element   | `__thumbnail-wrapper`         | The individual container for each gallery item, ensuring consistent sizing (e.g., 80x80px squares).                            |
| Element   | `__thumbnail-link`            | The interactive trigger that updates the source of the `__image` when clicked or hovered.                                      |
| Element   | `__thumbnail-image`           | The smaller preview image. Usually includes an opacity transition to indicate the "active" state.                              |
| Element   | `__image-missing-placeholder` | A fallback container styled with a neutral background and icon, used when the product has no associated media.                 |
| Modifier  | `__col--text`                 | The right/bottom column containing product metadata, pricing, and purchase controls.                                           |
| Element   | `__title`                     | The primary product name heading.                                                                                              |
| Element   | `__variant-title`             | A secondary heading identifying the specific chosen variation (e.g., "Space Gray").                                            |
| Element   | `__teaser`                    | A brief marketing snippet or short description appearing above the price.                                                      |
| Element   | `__price`                     | The unit price of the product; typically prominently styled.                                                                   |
| Element   | `__options`                   | The container for variant selection blocks (e.g., size/color pickers).                                                         |
| Element   | `__price-hint`                | Small-format text used for supplementary pricing information (e.g., "plus shipping," "incl. VAT," or "Price per unit: $1.50"). |
| Element   | `__amount`                    | The input group managing quantity selection and the dynamic **`__amount-total`** display.                                      |
| Element   | `__amount-total`              | A live-calculated string showing the total (Price × Quantity) before adding to cart.                                           |
| Element   | `__button`                    | Base class for triggers within the product view.                                                                               |
| Modifier  | `__button--add-to-card`       | The primary CTA for basket submission.                                                                                         |
| Element   | `__stock`                     | A status indicator showing availability (e.g., "In Stock," "Low Stock," or "Out of Stock").                                    |
| Element   | `__product-info`              | A tabbed or accordion-style container for technical specs and long-form descriptions.                                          |

### Gallery & Media Handling

The media section uses a primary `4x3` ratio for the main featured image or placeholder. If multiple images are provided, a thumbnail track is rendered below. Both the main image and thumbnails utilize `object-fit: cover` to ensure uniform scaling across varied source dimensions.

##### Generated HTML (Media Column)

```html
<div class="as-shop-product__col--image col-md-6">
    <div class="as-shop-product__image-wrapper">
        <a href="..." class="ratio ratio-4x3">
            <img src="..." class="as-shop-product__image" />
        </a>
    </div>
    <div class="as-shop-product__thumbnails">
        <div class="as-shop-product__thumbnail-wrapper">
            <img src="..." class="as-shop-product__thumbnail-image" />
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-shop-product {
  // Generous spacing between products
  margin-bottom: 3rem;

  &__row {
    // Increased gutter for visual clarity
    --bs-gutter-x: 3rem;
  }

  &__thumbnails {
    display: flex;
    overflow-x: auto; // Touch-friendly scrolling
    flex-wrap: nowrap;
    
    &::-webkit-scrollbar {
      display: none; // Hidden for cleaner UI
    }
  }
}
```
